<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>AiRent租房欢迎您</title>
  <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
  <link rel="stylesheet" th:href="@{/airent/css/index.css}">
  <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
  <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}" />
  <link rel="icon" th:href="@{/airent/common/imgs/icon.ico}" type="images/x-ico" />
  <style type="text/css">
    html {
      height: 100%
    }

    body {
      height: 100%;
      margin: 0px;
      padding: 0px
    }

    #container {
      width: 100%;
      height: 450px;
      border: #ccc solid 1px;
    }
  </style>
  <script type="text/javascript"
          src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
</head>

<body>
<!--引入导航栏-->
<div th:replace="~{head/topbar::topBar}"></div>
<!-- 轮播图 -->
<div id="carouselExampleCaptions" class="carousel slide animate__animated animate__fadeIn" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img th:src="@{/airent/imgs/banner01.jpg}" class="d-block w-100" alt="图片加载失败">
      <div class="carousel-caption d-none d-md-block">
        <h5>看什么看，爱租不租</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img th:src="@{/airent/imgs/banner02.jpg}" class="d-block w-100" alt="图片加载失败">
      <div class="carousel-caption d-none d-md-block">
        <h5>长得漂亮就能为所欲为了？</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img th:src="@{/airent/imgs/banner03.jpg}" class="d-block w-100" alt="图片加载失败">
      <div class="carousel-caption d-none d-md-block">
        <h5>我不要你觉得，我要我觉得！</h5>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<!-- 轮播添加标题 -->
<div class="row" id="heading-box">
  <div class="animate__animated animate__flipInX">
    <b>爱生活，安住房</b>
  </div>
</div>

<div id="app">

  <!-- 房源推荐卡片 -->
  <div id="house-recommend-first" class="container col-md-12  animate__animated animate__fadeInUp">
    <div id="recommend-title" class="offset-md-1">
      <a href="#">
        <h3>
          <svg id="house-icon" class="bi bi-house-door-fill" width="1em" height="1em" viewBox="0 0 16 16"
               fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
                    d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
            <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
          </svg>
          房源推荐
        </h3>
      </a>
    </div>
    <div id="recommend-slogan" class="offset-md-1">
      <span>精品好房等你来选</span>
    </div>
    <div class="offset-md-1">
    </div>
    <div class="row col-md-10 offset-md-1">
      <div class="col md-1 " v-for="house in housesRecommend">
        <div class="card animate__animated animate__fadeInUp houseBlock"  @click="showDetail(house.houseId)">
          <img :src="'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+house.imgs[0]" class="card-img-top" alt="图片加载失败" width="300px" height="250px">
          <div class="card-body">
            <h5 class="card-title" v-text="house.houseResource"></h5>
            <p class="card-text"><span v-text="house.houseMeasure"></span>m<sup>2</sup><span
                    v-text="house.houseTypeId">3室2厅1厨1卫</span></p>
            <p class="card-text"><span v-text="house.rentPrice"></span>元/月
          </div>
        </div>
      </div>
    </div>
    <div>
      <nav aria-label="Page navigation example" style="padding-right: 200px;padding-top: 50px">
        <ul class="pagination justify-content-end">
          <li class="page-item ">
            <a class="page-link" href="javascript:void(0)" tabindex="-1" aria-disabled="true"
               @click="goPageRecommend(-1)">上一页</a>
          </li>
          <li class="page-item"><a class="page-link active" href="javascript:void(0)"
                                   v-text="pageNumRecommend">1</a></li>
          <li class="page-item">
            <a class="page-link" href="javascript:void(0)" @click="goPageRecommend(1)">下一页</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>



  <!-- 房源推荐第二列 -->
  <div id="house-recommend-second" class="container col-md-12  animate__animated animate__fadeInUp">
    <div id="date-title" class="offset-md-1">
      <a href="#">
        <h3>
          <svg id="house-icon" class="bi bi-house-door-fill" width="1em" height="1em" viewBox="0 0 16 16"
               fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path
                    d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
            <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
          </svg>
          最新发布
        </h3>
      </a>
    </div>
    <div class="offset-md-1">
    </div>
    <div class="row col-md-10 offset-md-1">
      <div class="col md-1 " v-for="house in housesDate">
        <div class="card animate__animated animate__fadeInUp houseBlock"  @click="showDetail(house.houseId)">
          <img :src="'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+house.imgs[0]" class="card-img-top" alt="图片加载失败" width="300px" height="250px">
          <div class="card-body">
            <h5 class="card-title" v-text="house.houseResource"></h5>
            <p class="card-text"><span v-text="house.houseMeasure"></span>m<sup>2</sup><span
                    v-text="house.houseTypeId">3室2厅1厨1卫</span></p>
            <p class="card-text"><span v-text="house.rentPrice"></span>元/月
          </div>
        </div>
      </div>
    </div>
    <div>
      <nav aria-label="Page navigation example" style="padding-right: 200px;padding-top: 50px">
        <ul class="pagination justify-content-end">
          <li class="page-item ">
            <a class="page-link" href="javascript:void(0)" tabindex="-1" aria-disabled="true"
               @click="goPageDate(-1)">上一页</a>
          </li>
          <li class="page-item"><a class="page-link active" href="javascript:void(0)"
                                   v-text="pageNumDate">1</a></li>
          <li class="page-item">
            <a class="page-link" href="javascript:void(0)" @click="goPageDate(1)">下一页</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</div>



<!-- 引入底部 -->
<div th:replace="~{food/bottombar::topBar}"></div>
<script type="text/javascript" th:src="@{/airent/js/vue.js}"></script>
<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.js}"></script>
<script>
  $('#login-button').on('shown.bs.modal', function () {
    $('#myInput').trigger('focus')
  })
</script>

<script th:inline="javascript">
  window.onload = function locationcity() {
    function myFun(result) {
      var cityName = result.name;
      var outer = document.getElementById("cityname");
      outer.innerText = cityName;
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
  }

  var vueApp = new Vue({
    el: "#app",
    data: {
      pageNumRecommend: 1,
      pagesRecommend: 1,
      pageNumDate: 1,
      pagesDate: 1,
      housesRecommend: [],
      housesDate: [],
      cityName: '',
    },
    methods: {
      goPageRecommend: function (deltaPage) {
        this.pageNumRecommend += deltaPage;
        if (this.pageNumRecommend > this.pagesRecommend) {
          this.pageNumRecommend = this.pagesRecommend
          alert("已是最后一页")
        } else if (this.pageNumRecommend < 1) {
          this.pageNumRecommend = 1
          alert("已是首页")
        } else {
          showByRecommend(this.pageNumRecommend);
        }
      },
      goPageDate: function (deltaPage) {
        this.pageNumDate += deltaPage;
        if (this.pageNumDate > this.pagesDate) {
          this.pageNumDate = this.pagesDate
          alert("已是最后一页")
        } else if (this.pageNumDate < 1) {
          this.pageNumDate = 1
          alert("已是首页")
        } else {
          showByDate(this.pageNumDate);
        }
      },
      showDetail: function (houseId) {
        location.href="/houseUser/detail?houseId="+houseId
      }
    },
    created: function () {
      showByDate(1);
      showByRecommend(1);
    }
  });

  function showByRecommend(pageNum) {
    var url = /*[[@{/houseUser/showHouseSorted}]]*/

            $.post(url, {"pageNum": pageNum, "sortMethod": 1}, function (data) {

              vueApp.pagesRecommend = data.pages;
              vueApp.housesRecommend = data.list;

            }, "json")
  }

  function showByDate(pageNum) {
    var url = /*[[@{/houseUser/showHouseSorted}]]*/
            $.post(url, {"pageNum": pageNum, "sortMethod": 2}, function (data) {
              vueApp.pagesDate = data.pages;
              vueApp.housesDate = data.list;

            }, "json")
  }

</script>
</body>

</html>
